/**
 * 
 * Active Charts using Highcharts demonstration
 * 
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2012, Script Tutorials http://www.script-tutorials.com/
 */

// /////////////////////////////////////////////////////////////////////////////
function showme(obj) {
	document.getElementById(obj).style.display = "block";
}

function hideme(obj) {
	document.getElementById(obj).style.display = "none";
}

function enablecombo(obj) {
	document.getElementById(obj).disabled = false;
}

function disablecombo(obj) {
	document.getElementById(obj).disabled = true;
}

// ////////////////////////////////////////////////////////////////////////////

function ShowStzChart(chartDiv, chartName) {

	// getstdChartData( 'Consumption' );

	var xAxisTitles = [ "Saltlake", "Rajarhat", "Kasba", "Behala", "NewAlipur",
			"Golpark", "Dhakuria" ];

	var ItemData = [ 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6 ];
	var ItemTitle = '2013';

	InitializeChartStz(chartDiv, 'column', 450, chartName, xAxisTitles,
			'Consumption', ItemTitle, ItemData);

}

function InitializeChartStz(chartName, defaultChartType, chartSize, chartTitle,
		xAxisTitles, yAxisTitle, ItemTitle, ItemData) {

	chartObj = new Highcharts.Chart(
			{
				chart : {
					renderTo : chartName,
					type : defaultChartType,
					height : chartSize,
					borderColor : '#EBBA95',
					borderWidth : 3,
					type : defaultChartType
				},
				title : {
					text : chartTitle
				},
				xAxis : {},
				yAxis : {
					title : {
						text : yAxisTitle
					}
				},
				xAxis : {
					categories : xAxisTitles

				},
				// Added for click event by Kr. Abhishek
				plotOptions : {
					column : {
						dataLabels : {
							enabled : true,
							style : {
								fontWeight : 'bold',
							// color: 'red'
							},
							formatter : function() {
								return this.y
							}
						}
					},
					series : {
						cursor : 'pointer',
						point : {
							events : {
								click : function() {
									var url = "chartpopup?category=city&level=2";
									var win = window
											.open(url, 'Full Size Chart',
													'location=0,titlebar=0,status=0,width=780,height=650');

								}
							}
						}
					}
				},// end
				series : [ {
					name : ItemTitle,
					data : ItemData

				} ]
			});
}

// ////////////////////////////////////////////////////////////////// Customized
// Chart Start //////////////////////////////////////

// end
var chartTemp;
var chartInitialized = false;
var chartDataLoaded = false;
// added by Kr. Abhishek
// var category;
var level = 1;
var TotalLevelofChart = 4;
// end

function defaultChart(chartDiv, chartName) {
	chartInitialized = false;
	chartDataLoaded = false;

	level = 1;

	var e = document.getElementById("ddcity");
	var strCtgy = e.options[e.selectedIndex].text;

	xAxisPoints = [ "Saltlake", "Rajarhat", "Behala", "NewAlipur", "Golpark" ];
	xAxisValues = [ 500, 200, 600, 425, 1050 ];

	createChart(chartDiv, 'column', 450, chartName+": "+strCtgy, 'City', 'Consumption', 'Monthly', xAxisPoints, xAxisValues,
			strCtgy, level);
	selectOption('ddarea', 'All');
}

function createChart(chartDiv, defaultChartType, chartSize, chartTitle,
		xAxisTitle, yAxisTitle, seriesName, xAxisPoints, xAxisValues,
		chartCategory, chartLevel) {

	InitializeChart(chartDiv, defaultChartType, chartSize, chartTitle,
			xAxisTitle, yAxisTitle);
	
	if (!chartDataLoaded) {
		LoadChartData(xAxisTitle, yAxisTitle, seriesName, xAxisPoints,
				xAxisValues);
		addNaviLink( chartCategory, chartLevel);
	}
}

function LoadChartData(xAxisTitle, yAxisTitle, seriesName, xAxisPoints,
		xAxisValues) {
	chartTemp.xAxis[0].setTitle({
		text : xAxisTitle
	});
	chartTemp.yAxis[0].setTitle({
		text : yAxisTitle
	});
	chartTemp.series[0].name = seriesName;
	chartTemp.xAxis[0].setCategories(xAxisPoints);
	chartTemp.series[0].setData(xAxisValues);
	chartDataLoaded = true;
	// added by Kr. Abhishek
	if (level < TotalLevelofChart) {
		level++;
	}
	if (level == TotalLevelofChart) {
		level = 1;
	}
	// end
}

function InitializeChart(chartDiv, defaultChartType, chartSize, chartTitle,
		xAxisTitle, yAxisTitle) {
	chartTemp = new Highcharts.Chart({
		chart : {
			renderTo : chartDiv,
			type : defaultChartType,
			height : chartSize,
			borderColor : '#EBBA95',
			borderWidth : 3,
			type : defaultChartType
		},
		title : {
			text : chartTitle
		},
		subtitle : {
			text : 'Click the columns to drilldown.'
		},
		xAxis : {},
		yAxis : {
			title : {
				text : yAxisTitle,
				color: 'red'
			}
		},

		// Added for click event by Kr. Abhishek
		plotOptions : {
			column : {
				dataLabels : {
					enabled : true,
					style : {
						fontWeight : 'bold',
						//color: 'red'
					},
					formatter : function() {
						return this.y
					}
				}
			},
			series : {
				cursor : 'pointer',
				//color: 'black',
				point : {
					events : {
						click : function(event) {
							var chart = chartTemp;
							showSpecificCustomizedChart(this.category);
							//alert(this.y+'---'+this.category+'----'+this.x);
							//alert ('Category: '+ this.category +', value:'+this.y);
							//onDrilDown(this.category, level);
							// removeNaviLink(level);
						}
					}
				}
			}
		},// end
		series : [ {
			//pointWidth : 25,
			name : xAxisTitle,
			data : null
		} ]
	});
	chartInitialized = true;
}

// added by Kr. Abhishek
function onDrilDown( chartCategory, level) {

	chartInitialized = false;
	chartDataLoaded = false;

	if (level == 2) {

		xAxisPoints = [ 'SS01', 'SS02', 'SS03', 'SS04', 'SS05', 'SS06' ];
		xAxisValues = getSubAreaData(chartCategory);// [ 520, 300, 190, 90, 50,
		// 100 ];

		createChart('divchart', 'column', 450, "Consumption Report ("
				+ chartCategory + ")", 'Sub Station', 'Consumption', 'Monthly',
				xAxisPoints, xAxisValues, chartCategory, level);

		// selecting option dynamically
		selectOption('ddarea', chartCategory);
		enablecombo('ddsubarea');
		selectOption('ddsubarea', 'All');
	}

	if (level == 3) {

		xAxisPoints = [ 'Commercial', 'Domestic' ];
		xAxisValues = getCustomerTypeData(chartCategory);// [ 500, 200 ];

		createChart('divchart', 'column', 450, "Consumption Report ("
				+ chartCategory + ")", 'Customer Type', 'Consumption',
				'Monthly', xAxisPoints, xAxisValues, chartCategory, level);

		// selecting option dynamically
		selectOption('ddsubarea', chartCategory);
		enablecombo('ddcusttype');
		selectOption('ddcusttype', 'All');
	}

	if (level == 4 || level == 1) { 

		selectOption('ddarea', 'All');
		selectOption('ddsubarea', 'select');
		selectOption('ddcusttype', 'select');

		disablecombo('ddsubarea');
		disablecombo('ddcusttype');
		defaultChart('divchart', 'Consumption Analysis');

	}
}

function selectOption(id, key) {
	var options = document.getElementById(id).options;
	var n = options.length;
	for ( var i = 0; i < n; i++) {
		if (options[i].value == key) {
			options[i].selected = true;
			break;
		}
	}
}

function addNaviLink( chartCategory, level) {
	if (document.getElementById('level' + level) == null) {
		var aTag = document.createElement('a');
		aTag.setAttribute('class', 'btn');
		aTag.setAttribute('href', "#");
		aTag.setAttribute('id', 'level' + level);
		aTag.innerHTML = chartCategory + " &raquo;";
		aTag.setAttribute("onclick", "removeNaviLink(" + level + ");");
		document.getElementById('nev').appendChild(aTag);
	}
}

function removeNaviLink(level) {

	if (level <= TotalLevelofChart) {
		var lvl = TotalLevelofChart;
		while (lvl != level) {
			if (document.getElementById('level' + lvl) != null) {
				var elem = document.getElementById('level' + lvl);
				elem.parentNode.removeChild(elem);
			}
			lvl--;
		}
	}
	onDrilDown('cat', level);
}

function getSubAreaData(chartCategory) {
	var xAxisValues;
	if (chartCategory == 'Saltlake') {
		xAxisValues = [ 50, 100, 80, 120, 50, 100 ];
	}
	if (chartCategory == 'Rajarhat') {
		xAxisValues = [ 35, 40, 30, 20, 50, 25 ];
	}
	if (chartCategory == 'Behala') {
		xAxisValues = [ 100, 150, 200, 50, 75, 125 ];
	}
	if (chartCategory == 'NewAlipur') {
		xAxisValues = [ 50, 75, 20, 30, 150, 100 ];
	}
	if (chartCategory == 'Golpark') {
		xAxisValues = [ 400, 300, 190, 10, 50, 100 ];
	}
	return xAxisValues;
}

// [ 'SS01', 'SS02', 'SS03', 'SS04', 'SS05', 'SS06' ];
function getCustomerTypeData(chartCategory) {
	var xAxisValues;
	if (chartCategory == 'SS01') {
		xAxisValues = [ 50, 100 ];
	}
	if (chartCategory == 'SS02') {
		xAxisValues = [ 35, 40 ];
	}
	if (chartCategory == 'SS03') {
		xAxisValues = [ 100, 150 ];
	}
	if (chartCategory == 'SS04') {
		xAxisValues = [ 50, 75 ];
	}
	if (chartCategory == 'SS05') {
		xAxisValues = [ 400, 300 ];
	}
	if (chartCategory == 'SS06') {
		xAxisValues = [ 190, 50 ];
	}
	return xAxisValues;

}

// ////////////////////////////////////////////////////////////////// Customized
// Chart End //////////////////////////////////////

// ///////////////////////////////////////////////////////////////////
// Consumption Chart Start /////////////////////////////////
function defaultChartComp() {

	InitializeChartComp('chart_1', 'column', 450, 'Consumption Report', 'City',
			'Consumption');

}

function InitializeChartComp(chartName, defaultChartType, chartSize,
		chartTitle, xAxisTitle, yAxisTitle) {

	var e = document.getElementById("ddyearto");
	var strUser = e.options[e.selectedIndex].value;

	var e1 = document.getElementById("ddyearfrm");
	var strUser1 = e1.options[e1.selectedIndex].value;

	chartTemp = new Highcharts.Chart({
		chart : {
			renderTo : chartName,
			type : defaultChartType,
			height : chartSize,
			borderColor : '#EBBA95',
			borderWidth : 3,
			type : defaultChartType
		},
		title : {
			text : chartTitle
		},
		xAxis : {},
		yAxis : {
			title : {
				text : yAxisTitle
			}
		},
		xAxis : {
			categories : [ "Saltlake", "Rajarhat", "Kasba", "Behala",
					"NewAlipur", "Golpark", "Dhakuria", "NewAlipur" ]

		},
		// Added for click event by Kr. Abhishek
		plotOptions : {
			column : {
				dataLabels : {
					enabled : true,
					style : {
						fontWeight : 'bold',
					// color: 'red'
					},
					formatter : function() {
						return this.y
					}
				}
			},
			series : {
				cursor : 'pointer',
				point : {
					events : {
						click : function() {

						}
					}
				}
			}
		},// end
		series : [ {
			name : strUser,
			data : [ 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5 ]

		}, {
			name : strUser1,
			data : [ 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3 ]

		} ]
	});
}

// ///////////////////////////////////////////////////////////////////
// Consumption Chart End /////////////////////////////////

// ///////////////////////////////////////////////////////////////////
// Historical Chart Start /////////////////////////////////
function showmychart(divId, chartName) {

	$('#' + divId).highcharts('StockChart', {

		rangeSelector : {
			selected : 1
		},

		title : {
			text : chartName
		},

		series : [ {
			name : chartName,
			data : Histdata,
			tooltip : {
				valueDecimals : 2
			}
		} ]
	});
}
// /////////////////////////////////////////////////////////////////////
// Historical Chart End ///////////////////////////////////

function showSpecificCustomizedChart(xPointSelected) {
	var chartSelected = false;
	var substationBreadCrumbMap = new Object();
	$.each(chart1xAxisPoints, function(index, item) {
  		if(item == xPointSelected) {
			hideme('ctzchart-2');
			hideme('ctzchart-3');
			firstChartSelction = xPointSelected;
			var breadCrumbMap = getAllBreadCrumbs(true);
			chartNumber = 2;
			chartSelected = true;	
			if(reportType == 'CONSUMPTION') {
			substationBreadCrumbMap['SUBSTATION_ID'] = null;	
			breadCrumbMap['DIM_SUBSTATION'] = substationBreadCrumbMap;		
			console.log("Output-Chart2:"+JSON.stringify(breadCrumbMap));
			
				getCustomizedConsumptionReport(breadCrumbMap,chartNumber,xAxisLevel);
			} else if(reportType == 'ALARM'){
				//alert('Alarm Analysis Report');
				substationBreadCrumbMap['ITEM'] = null;	
				breadCrumbMap['DIM_TRANSFORMER_METER_TYPE'] = substationBreadCrumbMap;		
				console.log("Output-Chart2:"+JSON.stringify(breadCrumbMap));
				getCustomizedAlarmReport(breadCrumbMap,chartNumber,xAxisLevel);
			}	
			//getCustomizedConsumptionReport(breadCrumbMap,chartNumber,xPointSelected);
			//generateSubStationDimensionReportAjaxCall(breadCrumbMap,chartNumber,xPointSelected);
			showme('ctzchart-2');
			return false;
		}
	});

	if(!chartSelected) {
		var substationBreadCrumbMap = new Object();
		var customerBreadCrumbMap = new Object();
		$.each(chart2xAxisPoints, function(index, item) {
  			if(item == xPointSelected) {
				hideme('ctzchart-3');
				var breadCrumbMap = getAllBreadCrumbs(true);
				chartNumber = 3;
				chartSelected = true;
				if(reportType == 'CONSUMPTION') {
				substationBreadCrumbMap['SUBSTATION_ID'] = xPointSelected;
				breadCrumbMap['DIM_SUBSTATION'] = substationBreadCrumbMap;
				customerBreadCrumbMap['CUSTOMER_ID'] = null;
				breadCrumbMap['DIM_CUSTOMER'] = customerBreadCrumbMap;
				console.log("Output-Chart3:"+JSON.stringify(breadCrumbMap));				
				getCustomizedConsumptionReport(breadCrumbMap,chartNumber,xAxisLevel);
				} else if(reportType == 'ALARM'){
					//alert('Alarm Analysis Report');
					substationBreadCrumbMap['ITEM'] = xPointSelected;
					breadCrumbMap['DIM_TRANSFORMER_METER_TYPE'] = substationBreadCrumbMap;
					customerBreadCrumbMap['SEVERITY_ID'] = null;
					breadCrumbMap['DIM_SEVERITY'] = customerBreadCrumbMap;
					getCustomizedAlarmReport(breadCrumbMap,chartNumber,xAxisLevel);
				}	
				//generateCustomerDimensionReportAjaxCall(breadCrumbMap,chartNumber,xPointSelected);
				//getCustomizedConsumptionReport(breadCrumbMap,chartNumber,xPointSelected);
				showme('ctzchart-3');
				return false;
			}
		});
	}
}

function showCustomizedChart(chartNumber, chartDiv, chartDimension, xAxisLevel, xAxisPoints, xAxisValues) {
	var chartName=null;
	var yAxisTitle = null;
	if(reportType == 'CONSUMPTION') {
	 chartName = 'Consumption Analysis';
	 yAxisTitle = 'Consumption';
	}else if(reportType == 'ALARM'){
	 chartName = 'Alarm Analysis';
	 yAxisTitle = 'Alarm';
	}
	var defaultChartType = 'column';
	var chartHeight = 450;
	var chartTitle = chartName+": " + chartDimension + " Dimension";
	var xAxisTitle = xAxisLevel;
	//var yAxisTitle = 'Consumption';
	var columnWidth = null;
	var colors = Highcharts.getOptions().colors;

	if(xAxisPoints.length<4) {
		columnWidth = 70;
	}

	//Initialize Chart
	chartTemp = new Highcharts.Chart({
		chart : {
			renderTo : chartDiv,
			type : defaultChartType,
			height : chartHeight,
			borderColor : '#EBBA95',
			borderWidth : 3,
			type : defaultChartType
		},
		title : {
			text : chartTitle
		},
		subtitle : {
			//text : 'Click the columns to drilldown.'
		},
		xAxis : {},
		yAxis : {
			title : {
				text : yAxisTitle,
				color: 'red'
			}
		},

		plotOptions : {
			column : {
				dataLabels : {
					enabled : true,
					style : {
						fontWeight : 'bold',
						//color: 'red'
					},
					formatter : function() {
						return this.y
					}
				}
			},
			series : {
				cursor : 'pointer',
				color: colors[chartNumber],
				point : {
					events : {
						click : function(event) {
							showSpecificCustomizedChart(this.category);
						}
					}
				}
			}
		},
		series : [ {
			pointWidth : columnWidth,
			name : xAxisTitle,
			data : null
		} ]
	});

	//showme(chartDiv);

	//Plot data in Chart
	chartTemp.xAxis[0].setTitle({
		text : xAxisTitle
	});
	chartTemp.yAxis[0].setTitle({
		text : yAxisTitle
	});
	//chartTemp.series[0].name = xAxisLevel;
	chartTemp.xAxis[0].setCategories(xAxisPoints);
	chartTemp.series[0].setData(xAxisValues);
}

function showComparisonChart(chartNumber, chartDiv, chartDimension, xAxisLevel, series1Label, series1Points, series1Values, series2Label, series2Points, series2Values) {
	var chartName = 'Comparison Analysis';
	var defaultChartType = 'column';
	var chartHeight = 450;
	var chartTitle = chartName+": " + chartDimension + " Dimension";
	var xAxisTitle = xAxisLevel;
	var yAxisTitle = 'Consumption';
	var columnWidth = null;
	//var colors = Highcharts.getOptions().colors;

	if(series1Points.length<4) {
		columnWidth = 70;
	}

	//Initialize Chart
	chartTemp = new Highcharts.Chart({
		chart : {
			renderTo : chartDiv,
			type : defaultChartType,
			height : chartHeight,
			borderColor : '#EBBA95',
			borderWidth : 3,
			type : defaultChartType
		},
		title : {
			text : chartTitle
		},
		subtitle : {
			//text : 'Click the columns to drilldown.'
		},
		xAxis : {},
		yAxis : {
			title : {
				text : yAxisTitle,
				color: 'red'
			}
		},

		plotOptions : {
			column : {
				dataLabels : {
					enabled : true,
					style : {
						fontWeight : 'bold',
						//color: 'red'
					},
					formatter : function() {
						return this.y
					}
				}
			},
			series : {
				cursor : 'pointer',
				//color: colors[chartNumber],
				point : {
					events : {
						click : function(event) {
							showSpecificCustomizedChart(this.category);
						}
					}
				}
			}
		},
		series : [ {
			pointWidth : columnWidth,
			name : series1Label,
			data : null
		},
		{
			pointWidth : columnWidth,
			name : series2Label,
			data : null
		} ]
	});

	//showme(chartDiv);

	//Plot data in Chart
	chartTemp.xAxis[0].setTitle({
		text : xAxisTitle
	});
	chartTemp.yAxis[0].setTitle({
		text : yAxisTitle
	});

	chartTemp.xAxis[0].setCategories(series1Points);
	chartTemp.series[0].setData(series1Values);
	chartTemp.series[1].setData(series2Values);
}

function translateDisplayLabel(label) {
	if(label=='TIME-GEO-CONSUMPTION-REPORT') {
		return 'Consumption Report Analysis In Gepgrapy & Time Dimension';
	}
}
